<template>
  <div class="wrap" :style="`height: ${height}`">
    <Run
      v-if="data.form"
      view
      class="apply-form"
      :task-key="FLOW_TASK_KEY_VIEW"
      :form="data.form"
      :comps="data.comps"
      :data-value="data.dataValue"
      :loading="state.loading"
      @close="handleClose"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Run from '@/components/form-engine/run/index.vue'
import { util } from '@/utils'
import { FLOW_TASK_KEY_VIEW } from '@/utils/constant'
import type { DesignItemStruct } from '@/typings'
import { formRunApi } from '@/api/modules/flow/formRun'
import { useTagStore } from '@/stores/tag'

const height = computed(() => `${util.getContentHeight()}px`)

const route = useRoute()
const data = reactive<{ form: Record<string, any>; comps: DesignItemStruct[]; dataValue: any }>({} as any)
const state = reactive({ loading: false })

const getStructure = () => {
  formRunApi.findById(route.query.fid as string).then(resp => {
    if (resp.success) {
      if (resp.data && resp.data.formJson) {
        const json = JSON.parse(resp.data.formJson)
        data.form = json.form
        data.comps = json.comps
      }
      if (resp.data.formValue) {
        data.dataValue = JSON.parse(resp.data.formValue)
      }
    }
  })
}
onMounted(getStructure)

const router = useRouter()
const tagStore = useTagStore()
const handleClose = () => {
  tagStore.closeCurrent(router)
}
</script>

<style lang="scss" scoped>
.wrap {
  background-color: $--color-bg-gray;
  margin: -15px;
  padding: 0 10%;
  padding-bottom: 25px;
  .apply-form {
    box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
}
</style>
